<template>
	<view class="loginAll">
		<view class="title">登入账号</view>
		<input class="phone-input" v-model=loginForm.phone type="number" :maxlength="11" 
		placeholder="手机号"/>
		<input class="password-input" v-model=loginForm.password :maxlength="16" 
		password placeholder="密码"/>
		<button class="login-button" :disabled="isLogin" :loading="isLogin" @click="login">登入</button>
		<view class="tips">
			<navigator class="forget-password" url="/pages/aboutMyself/forgetPassword">
				忘记密码
			</navigator>
			<navigator class="code-login-register" 
			url="/pages/aboutMyself/codeLoginOrRegister">
				验证码登入/注册
			</navigator>
		</view>
		<view class="bottom">
			<checkbox @click="changeIsArgue"/>
			<view class="text">我已阅读并同意
			  <text @click="toServiceProtocol" class="service-protocol">
			  	服务协议
			  </text>
			  与
			  <text @click="toUserSecretProtocol" class="user-secret-protocol">
			  	用户隐私协议
			  </text>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		data() {
			return {
				loginForm:{
					phone:"",
					password:""
				},
				isArgue:false,
				isLogin:false
			}
		},
		methods: {
			login(){
				this.isLogin=true
				if(!/^1\d{10}$/.test(this.loginForm.phone)){
					uni.showToast({
						title:"手机号格式错误",
						icon:"error"
					})
					this.isLogin=false
					return
				}
				if(!/^[A-Za-z0-9_]{6,16}$/.test(this.loginForm.password)){
					uni.showToast({
						title:"密码格式错误",
						icon:"error"
					})
					this.isLogin=false
					return
				}
				if(!this.isArgue){
					uni.showToast({
						title:"请勾选协议",
						icon:"error"
					})
					this.isLogin=false
					return
				}//模拟用户登入成功
				uni.setStorage({
					key:"user",
					data:{
						avatarUrl:"../../static/defaultAvatar.png",//头像地址
						name:"杨志豪",
						university:"南昌工程学院",//学校名称
						qualification:1,//学历：0：专科：1：本科：2：研究生：3：博士
						quality:0,//办学性质：0：全日制：1：在职：2：自考
						sex:0,//性别，0：男，1：女
						grade:3,//年级
						fans:15,//粉丝数
						care:9,//关注数
						collect:8,//收藏
						money:8.36//余额
					}
				})
				uni.navigateBack({
					success: () => {
						uni.showToast({
							title:"登入成功",
							position:'top'
						})
					}
				})
				this.isLogin=false
			},
			changeIsArgue(){
				this.isArgue=(!this.isArgue==true)
			},
			toServiceProtocol(){
				uni.navigateTo({
					url:"/pages/protocols/serviceProtocol"
				})
			},
			toUserSecretProtocol(){
				uni.navigateTo({
					url:"/pages/protocols/userSecretProtocol"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.loginAll{
		width: 100vw;
		.title{
			width: 100vw;
			font-size: 50rpx;
			font-weight: bold;
			height: 15vh;
			line-height: 15vh;
			text-align: center;
		}
		.phone-input{
			width: 80vw;
			margin-left: 10vw;
			padding-left: 2px;
			height: 2rem;
			background-color: whitesmoke;
		}
		.password-input{
			width: 80vw;
			margin-left: 10vw;
			margin-top: 5vh;
			padding-left: 2px;
			height: 2rem;
			background-color: whitesmoke;
		}
		.login-button{
			width: 80vw;
			margin-left: 10vw;
			margin-top: 5vh;
			color: white;
			background-color: blue;
		}
		.tips{
			width: 80vw;
			height: 10vh;
			margin-top: 2vh;
			margin-left: 10vw;
			position: relative;
			.forget-password{
				position: absolute;
				left: 0;
			}
			.code-login-register{
				position: absolute;
				right: 0;
			}
		}
		.bottom{
			position: relative;
			width: 80vw;
			height: 20vh;
			margin-left: 10vw;
			.text{
				position: absolute;
				display: inline;
				left: 2rem;
				.service-protocol{
					color: blue;
				}
				.user-secret-protocol{
					color: blue;
				}
			}
		}
	}
</style>